<template>

<!--  <a-button type="primary" style="float: right" @click="submitList">提交</a-button>-->
    <a-table :columns="columns" :data-source="courseDate" bordered>
        <template #bodyCell="{ column, text, record }">
            <template
                v-if="['courseName', 'teacherName', 'term', 'place', 'teachingTime', 'studentBirthdate'].includes(column.dataIndex)">
                <div>
                    <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][column.dataIndex]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <span v-if="editableData[record.key]">

<!--                        <a-typography-link @click="save(record.key)">Save</a-typography-link>-->
                        <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
                            <a>Cancel</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
<!--                        <a @click="edit(record.key)">Edit</a>-->
                      <a-radio v-model:checked="record.visable" @click="Onchange(record)">选课</a-radio>
                    </span>
                </div>
            </template>
        </template>
    </a-table>
</template>
<script setup lang="ts">
import {cloneDeep, inRange} from 'lodash-es';
import type {UnwrapRef} from 'vue';
import {onMounted, reactive, ref} from 'vue';
import myAxios from "../../plugins/myAxios";
import {message} from "ant-design-vue";

const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        width: '5%',
    },
    {
        title: '课程号',
        dataIndex: 'courseNo',
        width: '15%',
    },
    {
        title: '课程名',
        dataIndex: 'courseName',
        width: '10%',
    },
    {
        title: '学时',
        dataIndex: 'courseTime',
        width: '10%',
    },
    {
        title: '学分',
        dataIndex: 'courseScore',
        width: '10%',
    },
    {
        title: '选课',
        dataIndex: 'operation',
        width: '10%',
    },
    // {
    //     title: '班级号',
    //     dataIndex: 'classNo',
    //     width: '10%',
    // },


];
interface DataItem {
    courseNo: string;
    courseName: string;
    // term: string;
    // place: string;
    // teachingTime: string;
    // classNo: string;
}


const courseDate = ref()

// const dataSource = ref(courseDate);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
    editableData[key] = cloneDeep(courseDate.value.filter(item => key === item.key)[0]);
};
const save = (key: string) => {
    Object.assign(courseDate.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
};
const cancel = (key: string) => {
    delete editableData[key];
};


onMounted(() => {
    getCourseList()
})
const getCourseList = async () => {
    // console.log(item)
    const res = await myAxios.get("/StudentChooseCoursesController/getCourses", {
        // year,
        // ter
    })
    if (res.data) {

        courseDate.value = res.data
      courseDate.value = courseDate.value.map(item => {
        item.visable = false
        return item
      })
        // courseDate.value = courseDate.value.map(item=>{
        //   item.createTime = dayjs(item.createTime).format('YYYY-MM-DD')
        //   return item
        // })
        console.log(courseDate.value)
    } else {
        message.error(res.message)
    }
}

// const loading = ref(false)
const year = ref()
const ter = ref('')
const loading = ref(false)

const getGrades = async () => {
    loading.value = true

    // year.value = (dayjs(year.value).format("YYYY"))
    // console.log(year.value)
    ter.value = (ter.value)
    getCourseList()
    loading.value = false
    // console.log(params)
}

interface DateList {
  courseNo: string;
  score: number;
  studentNo: string;
  term: string;

}
const paramDate = ref<DateList>()


const Onchange = async (record:any) => {
  record.visable = !record.visable
    // console.log(record.courseNo)
    const res = await myAxios.get("/StudentChooseCoursesController/addCourses",{
        params:{
            courses:record.courseNo
        }
    })
    if (res.code===0){
      message.success("选课成功")
      await getCourseList()
    }else {
      message.error(res.message)
    }
}
const submitList = async (courseNo:any) => {

  // const paramList = courseDate.value.filter(item=>{
  //   return item.visable
  // })
  // paramList.forEach(item=>{
  //   delete item.id
  //   delete item.courseName
  //   delete item.courseTime
  //   delete item.courseScore
  //   delete item.isDelete
  //   delete item.createTime
  //   delete item.updateTime
  //   delete item.visable
  // })
  //     const param = JSON.stringify(paramList)

console.log(courseNo)
  // const res = await myAxios.post("/StudentChooseCoursesController/addCourses",{
  //     course:courseNo
  // })
  // if (res.code===0){
  //   message.success("选课成功")
  //   await getCourseList()
  // }else {
  //   message.error(res.message)
  // }

  // console.log(param)
  // console.log(params)
}
</script>
<style scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>
